<template>
  <Dialog
    v-model="show"
    :title="isAudit ? $t('merchantApplicationDetailDia.商家入驻审核') : $t('merchantApplicationDetailDia.商家入驻申请详情')"
    width="720px"
    @close="close"
    @confirm="handleSubmit"
  >
    <div class="table-content h-500 overflow-y-auto">
      <div class="custom-table" style="width: 650px">
        <div class="titleRow">{{ $t('merchantApplicationDetailDia.审核信息') }}</div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.店铺名称') }}</div>
          <div class="custom-table-value">
            {{ tenantInfo["name" + locale] }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.入驻类型') }}</div>
          <div class="custom-table-value">
            {{ tenantInfo.settleType === 1 ? $t('merchantApplicationDetailDia.个人入驻') : $t('merchantApplicationDetailDia.企业入驻') }}
          </div>
        </div>
        <div class="titleRow">{{ $t('merchantApplicationDetailDia.店铺联系人信息') }}</div>
        <template v-if="tenantInfo.settleType === 1">
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.所在地') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.settleLocation }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.详细地址') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleAddress }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.联系人') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleContact }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.联系手机号') }}
            </div>
            <div class="custom-table-value">{{ tenantInfo.settlePhone }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.身份证正面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage1"
                :previewSrcList="[tenantInfo.settleIdImage1]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.身份证反面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage2"
                :previewSrcList="[tenantInfo.settleIdImage2]"
              />
            </div>
          </div>
        </template>
        <template v-if="tenantInfo.settleType === 2">
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.公司名称') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.settleCompanyName }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.所在地') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.settleLocation }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.详细地址') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleAddress }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.联系人') }}</div>
            <div class="custom-table-value">{{ tenantInfo.settleContact }}</div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.联系手机号') }}
            </div>
            <div class="custom-table-value">{{ tenantInfo.settlePhone }}</div>
          </div>
          <div class="titleRow">{{ $t('merchantApplicationDetailDia.营业执照信息') }}</div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.营业执照') }}</div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleLicenseImage"
                :previewSrcList="[tenantInfo.settleLicenseImage]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.法人身份证正面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage1"
                :previewSrcList="[tenantInfo.settleIdImage1]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.法人身份证反面') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleIdImage2"
                :previewSrcList="[tenantInfo.settleIdImage2]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.补充认证一') }}
            </div>
            <div class="custom-table-value">
              <span v-if="!tenantInfo.settleExtra1">{{ $t('merchantApplicationDetailDia.暂未上传') }}</span>
              <el-image
                v-else
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleExtra1"
                :previewSrcList="[tenantInfo.settleExtra1]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.补充认证二') }}
            </div>
            <div class="custom-table-value">
              <span v-if="!tenantInfo.settleExtra2">{{ $t('merchantApplicationDetailDia.暂未上传') }}</span>
              <el-image
                v-else
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleExtra2"
                :previewSrcList="[tenantInfo.settleExtra2]"
              />
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.补充认证三') }}
            </div>
            <div class="custom-table-value">
              <span v-if="!tenantInfo.settleExtra3">{{ $t('merchantApplicationDetailDia.暂未上传') }}</span>
              <el-image
                v-else
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleExtra3"
                :previewSrcList="[tenantInfo.settleExtra3]"
              />
            </div>
          </div>
        </template>
        <div class="titleRow">{{ $t('merchantApplicationDetailDia.佣金比例及收款信息') }}</div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.佣金比例') }}</div>
          <div class="custom-table-value">
            {{ configData.commissionRate ?? "--" }}%
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.收款人姓名') }}</div>
          <div class="custom-table-value">
            {{ configData.accountBankAccountName ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">
            {{ $t('merchantApplicationDetailDia.收款账户号码') }}
          </div>
          <div class="custom-table-value">
            {{ configData.accountBankAccountNo ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">
            {{ $t('merchantApplicationDetailDia.收款银行名称') }}
          </div>
          <div class="custom-table-value">
            {{ configData.accountBankName ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">
            {{ $t('merchantApplicationDetailDia.收款银行地址') }}
          </div>
          <div class="custom-table-value">
            {{ configData.accountBankAddress ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">SWIFT CODE</div>
          <div class="custom-table-value">
            {{ configData.accountBankCode ?? "--" }}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.缴费年限') }}</div>
          <div class="custom-table-value">
            {{ tenantInfo.ruleDuration }}{{$t('merchantApplicationDetailDia.年')}}
          </div>
        </div>
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.支付凭证') }}</div>
          <div class="custom-table-value">
            <el-image
              style="width: 100px; height: 100px"
              :src="tenantInfo.payImage"
              :previewSrcList="[tenantInfo.payImage]"
            />
          </div>
        </div>
        <template v-if="tenantInfo.status == -1">
          <div class="titleRow">{{ $t('merchantApplicationDetailDia.驳回原因') }}</div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.驳回原因') }}</div>
            <div class="custom-table-value">
              {{
                rejectReasonOptions.find(
                  (item) => item.id === tenantInfo.rejectReasonId
                )?.["name" + locale]
              }}
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('merchantApplicationDetailDia.驳回原因说明') }}
            </div>
            <div class="custom-table-value">
              {{ tenantInfo.rejectReason }}
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="audit-info custom-table" v-if="isAudit">
      <div class="titleRow">{{ $t('merchantApplicationDetailDia.审核') }}</div>
      <div class="custom-table-row">
        <div class="custom-table-label" style="width: 200px">{{ $t('merchantApplicationDetailDia.审核结果') }}</div>
        <div class="custom-table-value">
          <el-radio-group v-model="formData.status">
            <el-radio :label="2">{{ $t('merchantApplicationDetailDia.通过') }}</el-radio>
            <el-radio :label="-1">{{ $t('merchantApplicationDetailDia.驳回') }}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="custom-table-row" v-if="formData.status === -1">
        <div class="custom-table-label required" style="width: 200px">
          {{ $t('merchantApplicationDetailDia.驳回原因') }}
        </div>
        <div class="custom-table-value">
          <el-select
            v-model="formData.rejectReasonId"
            :placeholder="$t('merchantApplicationDetailDia.请选择驳回原因')"
          >
            <el-option
              v-for="item in rejectReasonOptions"
              :key="item.id"
              :label="item['name' + locale]"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="custom-table-row" v-if="formData.status === -1">
        <div class="custom-table-label required" style="width: 200px">
          {{ $t('merchantApplicationDetailDia.驳回原因说明') }}
        </div>
        <div class="custom-table-value">
          <el-input
            v-model="formData.rejectReason"
            type="textarea"
            rows="3"
            :placeholder="$t('merchantApplicationDetailDia.请输入驳回原因说明')"
          />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

const { locale, t } = useI18n();
const show = defineModel();
const emit = defineEmits(["success"]);
const tenantInfo = ref({});
const rejectReasonOptions = ref([]);
const configData = ref({});

const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  isAudit: {
    type: Boolean,
    default: false,
  },
});

const formData = ref({
  status: 2,
  rejectReason: "",
  rejectReasonId: "",
});

const getTenantInfo = async () => {
  try {
    const res = await Api.tenantInfo(props.id);
    tenantInfo.value = res.data || {};
  } catch (error) {
    console.log(error);
  }
};

watch(show, (val) => {
  if (val) {
    console.log("props.id===", props.id);
    getTenantInfo();
  }
});

const handleSubmit = () => {
  if (props.isAudit) {
    if (formData.value.status === -1) {
      if (!formData.value.rejectReasonId) {
        ElMessage.error(t('merchantApplicationDetailDia.请选择驳回原因'));
        return;
      }
      if (!formData.value.rejectReason) {
        ElMessage.error(t('merchantApplicationDetailDia.请输入驳回原因说明'));
        return;
      }
    }
    Api.checkSettled({
      id: props.id, //id
      status: formData.value.status, //状态 -1入驻审核驳回  2通过
      rejectReason: formData.value.rejectReason, //审核失败原因
      rejectReasonId: formData.value.rejectReasonId, //驳回原因id
      commissionRate: configData.value.commissionRate, //佣金比例
    }).then((res) => {
      if (res.status === 200) {
        ElMessage.success(t('merchantApplicationDetailDia.操作成功'));
        close();
        emit("success");
      }
    });
  } else {
    close();
  }
};

const close = () => {
  show.value = false;
  formData.value = {
    status: 2,
    rejectReason: "",
    rejectReasonId: "",
  }
};

const getRejectReason = async () => {
  const res = await Api.reasonList({
    page: 0,
    size: 1000,
    type: 3,
  });
  rejectReasonOptions.value = res.data.content || [];
};

const getConfig = async () => {
  const res = await Api.getConfig();
  configData.value = res.data || {};
};

onMounted(() => {
  getConfig();
  getRejectReason();
  getConfig();
});
</script>

<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
.mt24 {
  margin-top: 24px;
}

.titleRow {
  height: 36px;
  line-height: 36px;
  background: rgba(24, 144 ,255, 0.05);
  border-radius: 3px;
  padding-left: 10px;
  margin-top: 12px;
  font-weight: 500;
  color: #333;
}

.table-content {
  position: relative;
  padding-bottom: 300px;
  overflow-y: auto;
}
.audit-info {
  position: absolute;
  bottom: 56px;
  left: 24px;
  width: 650px;
  background: #ffffff;
}
</style>
